<template>
  <a-card class="action-card" >
    <a-card-meta>
      <span slot="title"> 
        <span class="card-title">{{cardTitle}}</span>
      </span>
      <span class="avatar" slot="avatar">
        <svg slot="avatar" class="icon svg-icon title-icon"  aria-hidden="true">
          <use :xlink:href="icon"></use>
        </svg>
        <span class="t">{{ tDisplay }}</span>
      </span>
      <span slot="description">
        <a-input :value="remark" @change="$emit('change',$event.target.value)"></a-input>
      </span>
    </a-card-meta>


    <slot>
      <div class="card-content">      
        <div v-if="action_type == 'move'" class="move-content">
          <span>
            <span class="label">起点</span> 
            <span>({{ moveStartPoint[0] }},{{ moveStartPoint[1] }})</span>
          </span>
          <span>
            <span class="label">终点</span>
            <span>({{ moveEndPoint[0] }},{{ moveEndPoint[1] }})</span>
          </span>
          <span>
            <span class="label">偏移</span>
            <span>({{ moveRel[0] }},{{ moveRel[1] }})</span>
          </span>
          <span>
            <span class="label">用时</span>
            <span>{{ ms2str(moveTimeUse) }}</span>
          </span>
        </div>
        <div v-if="isMousePressOrRelease" class="mouse-btn-content">
          <div class="mouse-btn-info-panel">
            <span>
              <span>{{ mouseBtnName }}</span>
              <span> {{ action_type == 'press' ? '点击' : '释放' }}  </span> 
            </span>
            <span>
              <span>坐标</span> <span>({{ x }},{{ y }})</span>
            </span>
          </div>
          <img class="mouse-img" :src="imgurl" @click="$emit('imgclick')" />
        </div>
        <div v-if="device == 'keyboard' && (action_type == 'press' || action_type == 'release') "> 
          <div>
            <span class="label" style="padding-right: 20px;">按键</span>
            <span>{{ keyboardKey }}</span>
          </div>
          <div>
            <span class="label" style="padding-right: 20px;">虚拟键码</span>
            <span>{{ btn.vk}}</span>
          </div>
        </div>
      </div> 

    </slot>
  </a-card>
</template>

<script>
export default {
  name: 'ActionCard',
  data() {
    return {
    }
  },
  props: {
    device:{
      type: String,
      default: ''
    },
    action_type:{
      type: String,
      default: ''
    },
    btn:{
      required: false
    },
    point:{
      type:Array,
      required: false,
      default: () => {
        return [-1,-1]
      }
    },
    ext_data:{
      required: false
    },
    t:{
      required: true
    },
    remark:{
      type: String,
      default: () => {
        return ''
      }
    },
    imgurl:{
      required: false,
      type: String,
      default: () => {
        return ''
      }
    } 
  },
  model:{
    prop: 'remark',
    event: 'change'
  },
  computed:{
    x(){
      if(this.point){
        return this.point[0]
      }
      return -1
    },
    y(){
      if(this.point){
        return this.point[1]
      }
      return -1
    },
    moveStartPoint(){
      if (this.action_type != "move"){
        return [-1,-1]
      }
      if (!this.ext_data)
        return this.point
      let d = this.ext_data[0]
      return [d.x,d.y] 
    },

    moveEndPoint(){
      if (this.action_type != "move"){
        return [-1,-1]
      }
      if (!this.ext_data)
        return this.point
      let d = this.ext_data[this.ext_data.length-1]
      return [d.x,d.y] 
    },

    moveRel(){
      let p1 = this.moveStartPoint
      let p2 = this.moveEndPoint
      return [p1[0]-p2[0],p1[1]-p2[1]]
    },

    moveTimeUse(){
      if (this.action_type != "move" || !this.ext_data){
        return 0
      }
      return  this.ext_data[this.ext_data.length-1].t 
    },

    deviceName(){
      if(this.device == 'mouse')
        return '鼠标'
      else if(this.device == 'keyboard')
        return '键盘'
      else
        return this.device
    },
    actionTypeName(){
      if(this.action_type == 'press')
        return '按下'
      else if(this.action_type == 'move')
        return '移动'
      else if(this.action_type == 'scroll')
        return '滚轮'
      else if(this.action_type == 'release')
        return '释放'
      else
        return this.action_type
    },
    cardTitle(){
      return `${this.deviceName} ${this.actionTypeName}`
    },
    icon(){
      if (this.device == "keyboard")
        return this.action_type == "press"? "#icon-jianpan" :  "#icon-iconset0282" 
      if (this.action_type == "press")
        if (this.btn.name=="left")
          return "#icon-zuojian1"
        if(this.btn.name=="right")
          return "#icon-youjian2"
        if(this.btn.name=="middle")
          return "#icon-zhongjian2"
      if(this.action_type=="release")
        if (this.btn.name=="left")
          return "#icon-mouseL"
        if(this.btn.name=="right")
          return "#icon-mouseR"
        if(this.btn.name=="middle")
          return "#icon-shubiaozhongjian1"
      if(this.action_type=="move")
        return "#icon-shubiaoyidong1"
      if(this.action_type=="scroll")
        return "#icon-shubiaogunlun1"
    },
    mouseBtnName(){
      if(this.device != "mouse" || !this.btn)
        return ""
      
      switch(this.btn.name){
        case "left":
          return "左键"
        case "right":
          return "右键"
        case "middle":
          return "中键"
        case "unknown":
          return "未知"
      }
      return ""
    },
    keyboardKey(){
      if (!this.btn) return ""
      return this.btn.name || this.btn.char
    },
    hasImg(){
      if (this.device != "mouse") return false
      if(this.action_type != "press" && this.action_type != "release") return false
      return this.ext_data && this.ext_data.img
    },
    tDisplay(){
     return this.ms2str(this.t)
    },
    isMousePressOrRelease(){
      return this.device == "mouse" && (this.action_type == "press" || this.action_type == "release")
    },
    isMouseMove(){
      return this.device == "mouse" && this.action_type == "move"
    },
    isMouseScroll(){
      return this.device == "mouse" && this.action_type == "scroll"
    },
    isKeyboard(){
    }

  },
  watch: {
    
  },
  mounted() {
  },
  methods: {
   ms2str(ms){
    if (ms < 1000) return `${ms}ms`
    let s = ms/1000.0
    if (s<60) return `${s}s`
    let m = s/60.0
    if(m >=1){
      m = Math.floor(m)
      s = Math.floor(s - m*60)
      s = s.toString().padStart(2, '0');
      return `${m}:${s}`
    }
   }
  }
}
</script>

<style scoped>

  .title-icon {
    font-size: 20px;
    width: 28px;
    height: 28px;
    line-height: 1.5rem;
    margin-left:20px;
    margin-right: 20px;
    vertical-align: baseline;
    position: relative;
    top: 8px;
  }
  .avatar{
    display: flex;
    flex-direction: column;
    gap:20px;
  }
  .t{
    scale: 0.8;
    color:gray;
  }

  .card-content{
    margin-top: 20px;
    /* border:1px solid red; */
    padding-left:64px; 
  }

  .move-content{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between; /* 调整子元素之间的间距 */
    align-items:stretch;    /* 垂直居中对齐子元素 */
  }
  .move-content>span{
    flex:0 0 48%;

  }

  .mouse-btn-content{
    display:flex;
    flex-direction: row;
    flex:0,0,50%; /* 子元素占据的宽度 */
    align-items: stretch;
    padding-left:20px;
  }
  .mouse-btn-info-panel{
    margin-right:16px;
    display: flex;
    flex:0,0,1;
    flex-direction: column;
    min-width: 50%;
    align-items: start;
   
  }
  .mouse-btn-content img{
    width:48px;
    height: 48px;
  }

</style>
